<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
        background-color: #cacaca;
    }
    .box{
       width: 800px;
       height: 600px;
      margin: 10px auto;
       background-color:white;
      overflow: hidden;
   }
    .title{
      width: 800px;
      height: 50px;
      margin-top: 60px;
      line-height: 50px;
      margin-left: 30px;
    }
    .star{
      text-align: center;
       width: 250px;
       height: 150px;
       margin-left: 30px;
      margin-top: 10px;
       line-height: 50px;
      background-color: #f3f3fb;
      overflow: hidden;
      float: left;
   }
    span{
        display:block;
        line-height: 20px;
       margin-top: 20px;
    }
    .span1{
      font-size: 20px;
      color: #e6a000;
      font-weight: bold;
    }
    .span3{
      font-size: 15px;
      color: #878e91;
    }
    .big{
      width: 400px;
      height: 250px;
      margin-top: 10px;
      margin-left: 50px;
      float: left;
      background-color: white;
      border-bottom: 1px solid #efefef;
    }
    .info{
      width: 250px;
      height: 200px;
      background-color: #fbfbfb;
      overflow: hidden;
    }
    .img{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #e6e6e6;
      margin-left: 20px;
      margin-top: 20px;
      float: left;
    }
    .name{
      width: 100px;
      height: 50px;
      /*background-color: #a83a3a;*/
      margin-left: 20px;
      margin-top: 20px;
      float: left;
      overflow: hidden;
    }
    span{
        display: block;
        margin-left: 10px;
    }
    .content{
      width: 200px;
      height: 150px;
      background-color: #fbfbfb;
      margin-left: 20px;
      float: left;
      overflow: hidden;
      font-size: 15px;
    }
   .button{
      width:400px;
      height: 50px;
     float: left;
     margin-top: 20px;
     margin-left: 330px;
      /*background-color: #811818;*/
     text-align: center;
   }
   button{
      width: 30px;
      height: 30px;
     margin-top: 10px;
      margin-left: 10px;
     border: none;
     background-color: #eeeeee;
   }
   button:hover{
    color: white;
     background-color: #4495da;
   }
  </style>
</head>
<body>
<div class="box">
  <div class="title">
    <h2 style="font-size: 18px">用户评价(248)</h2>
  </div>
  <div class="star">
    <span class="span1">4.8分</span>
    <span class="span2">⭐⭐⭐⭐⭐</span>
    <span class="span3">共248条评价</span>
  </div>
<!--  <p>张三</p><p>2023-05-07</p>-->
  <div class="big">
    <div class="info">
      <div class="img"></div>
      <div class="name"><p style="font-size: 12px;font-weight: bolder">张三</p><p style="font-size: 10px;color: #e0e0e0">2023-05-07</p></div>
      <div class="content">
        <p>
          商品质量非常好，完全超出了我的预期。物流速度也很快，包装很仔细，客服态度也很好，非常满意的一次购物体验!
        </p>
         <p style="color: #7d8888;font-size: 12px">?有用(24)&nbsp;?回复</p>
      </div>
    </div>
  </div>
  <div class="button"><button>1</button><button>2</button><button>3</button><button>4</button></div>
</div>
</body>
</html>